<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>图书管理系统 - 图书添加</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

	<!-- 配置Tailwind自定义颜色和字体 -->
	<script>
		tailwind.config = {
			theme: {
				extend: {
					colors: {
						primary: '#F8C8DC', // 淡粉色主色调
						secondary: '#F4B6C2', // 稍深粉色
						accent: '#FF69B4',    // 亮粉色强调
						neutral: '#FFF5F7',   // 极浅粉色背景
					},
					fontFamily: {
						sans: ['Segoe UI', 'Roboto', 'sans-serif'],
					},
				}
			}
		}
	</script>

	<style type="text/tailwindcss">
		@layer utilities {
			.form-input-focus {
				@apply focus:ring-2 focus:ring-accent/50 focus:border-accent;
			}
			.card-shadow {
				@apply shadow-lg shadow-primary/30;
			}
			.btn-hover {
				@apply hover:shadow-md hover:-translate-y-0.5 transition-all duration-300;
			}
		}
	</style>
</head>
<body class="bg-gradient-to-br from-neutral to-white min-h-screen flex items-center justify-center p-4">
<!-- 页面容器 -->
<div class="w-full max-w-md">
	<!-- 卡片容器 -->
	<div class="bg-white rounded-2xl card-shadow p-8 transform transition-all duration-500 hover:shadow-xl">
		<!-- 标题区域 -->
		<div class="text-center mb-8">
			<h3 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-700 flex items-center justify-center">
				<i class="fa fa-book text-accent mr-3"></i>
				图书管理系统-图书添加
			</h3>
			<div class="w-20 h-1 bg-primary mx-auto mt-2 rounded-full"></div>
		</div>

		<!-- 表单区域 -->
		<form action="/book/execu_addBook" method="post" class="space-y-5">
			<!-- 书名输入 -->
			<div class="relative">
				<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
					<i class="fa fa-bookmark text-secondary"></i>
				</div>
				<input
						type="text"
						placeholder="请输入书名"
						name="bookName"
						required
						class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 form-input-focus outline-none transition-all duration-300 bg-neutral/50"
				/>
			</div>

			<!-- 价格输入 -->
			<div class="relative">
				<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
					<i class="fa fa-money text-secondary"></i>
				</div>
				<input
						type="number"
						placeholder="请输入价格"
						name="bookPrice"
						step="0.01"
						min="0"
						required
						class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 form-input-focus outline-none transition-all duration-300 bg-neutral/50"
				/>
			</div>

			<!-- 作者输入 -->
			<div class="relative">
				<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
					<i class="fa fa-user text-secondary"></i>
				</div>
				<input
						type="text"
						placeholder="请输入作者"
						name="author"
						required
						class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 form-input-focus outline-none transition-all duration-300 bg-neutral/50"
				/>
			</div>

			<!-- 库存输入 -->
			<div class="relative">
				<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
					<i class="fa fa-cubes text-secondary"></i>
				</div>
				<input
						type="number"
						placeholder="请输入库存"
						name="bookNum"
						min="0"
						required
						class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 form-input-focus outline-none transition-all duration-300 bg-neutral/50"
				/>
			</div>

			<!-- 提交按钮 -->
			<button
					type="submit"
					class="w-full bg-primary hover:bg-secondary text-gray-800 font-medium py-3 px-4 rounded-lg transition-all duration-300 btn-hover flex items-center justify-center"
			>
				<i class="fa fa-plus-circle mr-2"></i>
				添加图书
			</button>

			<!-- 返回按钮 -->
			<button
					type="button"
					onclick="history.back()"
					class="w-full mt-3 bg-white border border-primary text-gray-700 font-medium py-2 px-4 rounded-lg transition-all duration-300 hover:bg-neutral btn-hover flex items-center justify-center"
			>
				<i class="fa fa-arrow-left mr-2"></i>
				返回
			</button>
		</form>
	</div>

	<!-- 页脚信息 -->
	<div class="text-center mt-6 text-gray-500 text-sm">
		<p>图书管理系统 &copy; 2023</p>
	</div>
</div>

<!-- 简单的表单验证脚本 -->
<script>
	document.querySelector('form').addEventListener('submit', function(e) {
		const inputs = this.querySelectorAll('input[required]');
		let isValid = true;

		inputs.forEach(input => {
			if (!input.value.trim()) {
				isValid = false;
				input.classList.add('border-red-500');
				input.classList.add('animate-shake');

				// 移除动画类以便下次可以重新触发
				setTimeout(() => {
					input.classList.remove('animate-shake');
				}, 500);
			} else {
				input.classList.remove('border-red-500');
			}
		});

		if (!isValid) {
			e.preventDefault();
			// 显示错误提示
			const errorMsg = document.createElement('div');
			errorMsg.className = 'bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mt-4 text-center animate-fade-in';
			errorMsg.textContent = '请填写所有必填字段';
			this.parentNode.appendChild(errorMsg);

			// 3秒后自动移除错误提示
			setTimeout(() => {
				errorMsg.remove();
			}, 3000);
		}
	});

	// 添加CSS动画
	const style = document.createElement('style');
	style.textContent = `
            @keyframes shake {
                0%, 100% { transform: translateX(0); }
                20%, 60% { transform: translateX(-5px); }
                40%, 80% { transform: translateX(5px); }
            }
            @keyframes fadeIn {
                from { opacity: 0; transform: translateY(-10px); }
                to { opacity: 1; transform: translateY(0); }
            }
            .animate-shake {
                animation: shake 0.5s ease-in-out;
            }
            .animate-fade-in {
                animation: fadeIn 0.3s ease-out;
            }
        `;
	document.head.appendChild(style);
</script>
</body>
</html>
